<div class="affiliate-programs">
    <div class="{% unless section.settings.full_width %}page-width{% endunless %}">
      <div class="pro-affiliate">
        <div class="tenways-affiliate">
          <div class="image-with-text__media {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
          {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
        >
          {%- if section.settings.image != blank -%}
            <img
              srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
                {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                {%- if section.settings.image.width >= 600 -%}{{ section.settings.image | img_url: '600x' }} 600w,{%- endif -%}
                {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
              src="{{ section.settings.image | img_url: '1500x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
              alt="{{ section.settings.image.alt | escape }}"
              loading="lazy"
              width="{{ section.settings.image.width }}"
              height="{{ section.settings.image.height }}"
            >
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
      </div>
      <div class="tenways-gram">
        {%- if section.settings.heading != blank -%}
        <div class="affiliate-title">
          <div class="image-aff {% if section.settings.image_aff != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
           {% if section.settings.image_aff != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_aff.aspect_ratio | times: 100 }}%;"{% endif %}
         >
           {%- if section.settings.image_aff != blank -%}
             <img
               srcset="{%- if section.settings.image_aff.width >= 165 -%}{{ section.settings.image_aff | img_url: '165x' }} 165w,{%- endif -%}
                 {%- if section.settings.image_aff.width >= 323 -%}{{ section.settings.image_aff | img_url: '323x' }} 323w,{%- endif -%}
                 {%- if section.settings.image_aff.width >= 535 -%}{{ section.settings.image_aff | img_url: '535x' }} 535w,{%- endif -%}
                 {%- if section.settings.image_aff.width >= 750 -%}{{ section.settings.image_aff | img_url: '750x' }} 750w,{%- endif -%}
                 {%- if section.settings.image_aff.width >= 1070 -%}{{ section.settings.image_aff | img_url: '1070x' }} 1070w,{%- endif -%}
                 {%- if section.settings.image_aff.width >= 1500 -%}{{ section.settings.image_aff | img_url: '1500x' }} 1500w,{%- endif -%}
                 {{ section.settings.image_aff | img_url: 'master' }} {{ section.settings.image_aff.width }}w"
               src="{{ section.settings.image_aff | img_url: '1500x' }}"
               sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
               alt="{{ section.settings.image_aff.alt | escape }}"
               loading="lazy"
               width="{{ section.settings.image_aff.width }}"
               height="{{ section.settings.image_aff.height }}"
             >
           {%- else -%}
             {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
           {%- endif -%}
         </div>
           <h2 class="title">
             {{ section.settings.heading | escape }}
           </h2>
           {%- if section.settings.text != blank -%}
           
               <div class="rte">{{ section.settings.text }}</div>
           {%- endif -%}
           {%- if section.settings.button_label != blank -%}
           <span class="ten-button ten-button_1">
              <a target="_blank" {% if section.settings.button_link != blank %} href="{{ section.settings.button_link }}"{% endif %} class="ten-hover button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if section.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                  <span>{{ section.settings.button_label | escape }}</span>
                </a>
           </span>
          {%- endif -%}
        </div> 
      {%- endif -%}
      </div>
      </div>
    </div>
</div>

{% schema %}
{
  "name": "Affiliate program",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
  {
    "type": "image_picker",
    "id": "image",
    "label": "t:sections.image-with-text.settings.image.label"
  },
  {
    "type": "image_picker",
    "id": "image_aff",
    "label": "t:sections.image-with-text.settings.image.label"
  },
  {
    "type": "text",
    "id": "heading",
    "default": "Talk about your brand",
    "label": "Heading"
  },
  {
    "type": "richtext",
    "id": "text",
    "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
    "label": "Text"
  },
  {
    "type": "text",
    "id": "button_label",
    "default": "Button label",
    "label": "Button label",
    "info": "Button label"
  },
  {
    "type": "url",
    "id": "button_link",
    "label": "Button link"
  },
  {
    "type": "checkbox",
    "id": "full_width",
    "default": false,
    "label": "t:sections.rich-text.settings.full_width.label"
  }
  ],
  "blocks": [
  ],
  "presets": [
    {
      "name": "Affiliate program"
    }
  ]
}
{% endschema %}
